<template>
  <view class="carts_container" :class="other_goods_length ? 'prevent' : ''">
    <view class="home_top_bg">
      <view class="top_bgimg" :style="'height:' + topBarHeight + 'px;'">
        <view class="top_cont"
          :style="'height:' + tabBarHeight + 'px;margin-top:' + stateBarHeight + 'px;'">
          <view class="title">购物车 <text class="title_num">({{ cartsNum }})</text>
          </view>
          <view class='edit' @click="edit = !edit">
            {{ edit ? '编辑' : '完成' }}
          </view>
        </view>
      </view>
    </view>

    <view class="tips" :style="'top:' + topBarHeight + 'px'" v-if="cartsNum && edit">
      <view class="tips_tips" v-if="tipList.length">
        <view v-for="(item,index) in tipList" :key="index" class="tips_item">
          <image :src=" staticUrl() + (index%2?'/new/tips1.png':'/new/tips2.png')"></image>
          <text>{{ item }}</text>
        </view>
      </view>
    </view>

    <!-- 顶部高 -->
    <view v-if="tipList.length"
      :style="'height:' + (topBarHeight + (40 * tipList.length)) + 'px;padding-bottom:20rpx'">
    </view>
    <view v-else :style="'height:' + (topBarHeight+20) + 'px'"></view>

    <!-- 正品 -->
    <view class="qualityGoods">
      <Item v-for="(item,index) in skuList_temporary" :key="index" :goods="item"
        @clickCoupon="displayableCoupon" @clickReduce="reduce" @clickAdd="add"
        @changeNum="changeNumHandle" @clickMoreRule="more" @chengChecked="changeSelectStatus"
        @otherGoods="clickOtherGoods" @deleteCartsGoods="deleteGoods" ref="child">
      </Item>
    </view>

    <!-- 活动  specifyPromotions-->
    <!-- <view class="qualityGoods activityGoods"> </view> -->

    <!-- 福利商品 活动 -->
    <view class="welfare" v-if="cartsNum && giftList.length">
      <view class="title">福利商品</view>
      <view class="list" v-for="(item, index) in giftList" :key="index">
        <ImageCache :src="item.original ? item.original : staticUrl() + '/home/defaultImg.png'" />
        <view class="info">
          <text class="name">{{ item.title }}</text>
          <text class="goodsName">{{ goodsNameAggregate(item.skuList) }}</text>
          <text class="price">礼品价值：{{ giftPrice(item.skuList) }}元</text>
          <text class="price2">满{{ item.consumeThreshold }}加{{ item.price }}元可领取</text>
        </view>
      </view>
    </view>
    <!-- 失效  invalidSkuList -->
    <view class="invalidGoods" v-if="invalidSkuList.length">
      <view class="type">
        <text> 失效商品 </text>
        <text class="clearGoods" @click="removeGoods"> 清除失效商品 </text>
      </view>

      <view v-for="(item, index) in invalidSkuList" :key="index">
        <view class="item">
          <view class="image">
            <ImageCache
              :src="item.goodsSku.original?item.goodsSku.original:staticUrl()+'/home/defaultImg.png'"
              :mode="'scaleToFill'" />
          </view>
          <view class="goods_info">
            <view class="goodsName singleRowEllipsis">{{ item.goodsSku.goodsName }}</view>
            <view class="simpleSpecs singleRowEllipsis">规格：{{ item.goodsSku.simpleSpecs }}</view>
            <view class="expirationDate">
              <img :src="staticUrl() + '/new/expiration.png'" alt="" class="_icon" />
              <text>{{ item.goodsSku.expirationDate }}</text>
            </view>
            <view class="manufacturer singleRowEllipsis">
              <img :src="staticUrl() + '/new/company.png'" alt="" class="_icon" />
              <text>{{ item.goodsSku.manufacturer }}</text>
            </view>
            <view class="price"> ￥{{ item.goodsSku.price }} </view>
          </view>
        </view>
      </view>
    </view>

    <view class="notGoods" v-if="!cartsNum">您的购物车没有商品哦~</view>

    <view style="height:14vh;width:100%"> </view>

    <!-- 结算导航 -->
    <view class="cartsBottom">
      <view class="countDown" v-if="tips && edit">
        <image :src=" staticUrl() + '/new/tips1.png'"></image>
        <text>{{ tips }}</text>
      </view>
      <view v-if="cartsNum">
        <view class="Typesetting" v-if="edit">
          <view>
            <label @click="changeSelete">
              <checkbox v-model="checked" :checked="checked" /> 全部
            </label>
          </view>
          <view class="flowPrice">
            <view class="prices">
              <view>
                总计:<text class="total"> ￥{{ cartsNum ? priceDetailDTO.flowPrice : 0 }} </text>
              </view>
              <view class="couponPrice">
                已减:{{cartsNum?(priceDetailDTO.goodsPrice - priceDetailDTO.flowPrice).toFixed(2):''}}<text
                  @click="clickHasReduced()">价格明细</text>
                <image :src="staticUrl() +'/new/vector.png'"></image>
              </view>
            </view>
            <button @click="preview" :class="settleable ? 'buttons' : 'buttons noActive'">
              去结算({{ cartsNum }})
            </button>
          </view>
        </view>
        <view class="Typesetting" v-else>
          <view>
            <label @click="changeSelete">
              <checkbox v-model="checked" :checked="checked" /> 全部
            </label>
          </view>
          <view>
            <text class="removeGoods" @click="removeGoods">移除失效药品</text>
            <text class="deleteGoods" @click="deleteGoods">删除</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 规则弹窗 -->
    <view class="ruleStyle" v-if="ruleStatus">
      <view class="rule">
        <view class="title">
          <text>活动规则</text>
          <img :src="staticUrl() + '/home/close.png'" @click="ruleStatus = false" />
        </view>
        <view class="rule_item">
          <view class="type">
            <text>{{ promotionsTitle }}</text>
          </view>
          <view>
            <view class="item" v-for="(item, index) in promotions" :key="index"> {{ item }} </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 优惠券弹窗 -->
    <view class="ruleStyle" v-if="displayableCouponStatus"
      @click.stop="displayableCouponStatus=false">
      <view class="data" @click.stop="">
        <view class="body">
          <view class="title"></view>
          <scroll-view scroll-x class="displayableCouponList">
            <view v-for="item in displayableCouponList" :key="item.id" class="item"
              :style="item.available?'':'filter:grayscale(100%)'">
              <view v-if="item.couponType === 'PRICE'" class="left">
                <view class="price">
                  ￥<text>{{ item.price }}</text>
                </view>
                <text class="price_rule">满{{ item.consumeThreshold }}使用</text>
              </view>
              <view v-if="item.couponType === 'DISCOUNT'" class="left">
                <view class="price">
                  <text>{{ calculate(item.couponDiscount) }}</text>折
                </view>
                <text class="price_rule">满{{ item.consumeThreshold }}使用</text>
              </view>
              <view class="right">
                <text>{{ item.prompt }}</text>
                <image :src="staticUrl()+'/new/displayableCoupon.png'"></image>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </view>
    <!-- 删除弹框 -->
    <view class="deleteConfirm" v-if="deleteConfirm">
      <view class="box">
        <img :src="staticUrl() + '/carts/warning.png'" alt="" />
        <view> {{ deleteConfirmContent }} </view>
        <view class="button">
          <button @click="deleteConfirm = false">取 消</button>
          <button @click="determine">确 定</button>
        </view>
      </view>
    </view>
    <!-- 组合套餐 其他商品 弹窗 -->
    <view class="combinationGoods" v-if="other_goods.length" @click="closeCombinationGoods">
      <view class="box">
        <view class="title">
          <text>组合套餐列表</text>
          <img :src="staticUrl() + '/home/close.png'" @click="closeCombinationGoods" />
        </view>
        <view v-for="(i, j) in other_goods" :key="j" class="combinationGoods_item">
          <image :src="i.original ? i.original : staticUrl() + '/home/defaultImg.png'"></image>
          <view class="combinationGoods_right">
            <view class="goodsName singleRowEllipsis" @click="clickGoodsInfo(i.id)">
              {{ i.goodsName }}
            </view>
            <view class="simpleSpecs singleRowEllipsis">规格：{{ i.simpleSpecs || '' }} </view>
            <view class="expirationDate">
              <img :src="staticUrl() + '/home/expirationDate.png'" class="_icon" />
              <text>{{ i.expirationDate }}</text>
            </view>
            <view class="manufacturer singleRowEllipsis">
              <img :src="staticUrl() + '/home/manufacturer.png'" class="_icon" />
              <text>{{ i.manufacturer }}</text>
            </view>
            <view style="margin-top:10rpx">
              <span class="ephedrine" v-if="i.ephedrine">含麻</span>
            </view>
            <view class="originalPrice">
              <text>￥</text>
              <text>{{ i.originalPrice.toFixed(2) }}</text>
              <text>/{{ i.goodsUnit || '' }}</text>
              <view>x{{ i.num }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 提交确认 弹窗 -->
    <Dialog :dialog="dialog" :title="title" :content="content" @confirm="dialogConfirm"
      @cancel="dialogCancel">
    </Dialog>
    <!-- 提交 -->
    <view class="dialog_expirationDate" v-if="dialogChecked">
      <image class="dialog_bg" :src="staticUrl() + '/new/dialog.png'"></image>
      <view class="dialog_box">
        <view class="title"> {{ title }} </view>
        <view v-if="tipList.length">
          <view v-for="(item,index) in tipList" :key="index" class="dialog_item">
            <image :src="staticUrl() + (index%2?'/new/tips1.png':'/new/tips2.png')"></image>
            <text>{{ item }}</text>
          </view>
        </view>
        <view class="content" @click="confirmMessageChecked = !confirmMessageChecked">
          <checkbox :checked="confirmMessageChecked"> </checkbox>
          <text>{{ confirmMessage }}</text>
        </view>
        <view class="btn">
          <text class="cancelText" @click="dialogChecked = false">取消</text>
          <text :class="confirmMessageChecked ? 'confirmText' : 'confirmText2'"
            @click="dialogConfirm">
            确认
          </text>
        </view>
      </view>
    </view>
    <!-- 资质过期提示 -->
    <QualificationsStatus v-if="verifyTokenStatus"></QualificationsStatus>
    <!-- 修改数量 -->
    <view class="addCartsNum" v-if="addCartsStatus" @click.stop="addCartsStatus = false">
      <view class="content" @click.stop="">
        <view class="number">
          <text @click="reduceNum">-</text>
          <input type="number" v-model="addCartsNum" @blur="changeNum">
          <text @click="addNum">+</text>
        </view>
        <view class="shopcar">
          <text @click="clickBar">确定</text>
        </view>
      </view>
    </view>
    <!-- 价格明细 -->
    <view class="reduced" v-if="reduced" @click="reduced=false">
      <view class="reduced_box" @click.stop="">
        <view class="title">
          <text>优惠明细</text>
          <image :src="staticUrl() + '/home/close.png'" @click="reduced=false"></image>
        </view>
        <view class="reduced_body">
          <view class="item">
            <text>商品总价</text>
            <text>￥{{priceDetailDTO.goodsPrice}}</text>
          </view>
          <view class="item">
            <text>优惠券</text>
            <text>-￥{{priceDetailDTO.couponPrice}}</text>
          </view>
          <view class="item">
            <text>运费</text>
            <text>+￥{{priceDetailDTO.freightPrice}}</text>
          </view>
          <view class="item">
            <text>优惠</text>
            <text>-￥{{priceDetailDTO.discountPrice}}</text>
          </view>
          <view class="item total">
            <text>合计</text>
            <text>￥{{priceDetailDTO.flowPrice}}</text>
          </view>
          <view class="supplement"> *实际金额以下单页为准 </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
import {
  getCartNum, getCarInfo, deleteCarGoods, singleSelectedStatus,
  selectedAllStatus, toUpdateCarNum, cartStock, selectedStatus,
  getCombinationProducts, getGiftReceiveList, displayableCoupon
} from '@/api/carts/index.js'

import delSlide from '@/components/carts/delSlide.vue'
import Dialog from '@/components/dialog'
import { calculate } from '@/utils/util.js'
import Item from "./item.vue"

export default {
  components: { Dialog, delSlide, Item },
  data () {
    return {
      verifyTokenStatus: false,
      addCartsStatus: false, //改变商品数量弹框
      addCartsNum: 0, //弹框数量
      pack: 1,
      topBarHeight: 0, //状态栏加导航栏高度
      stateBarHeight: 0, //导航栏高度
      tabBarHeight: 50, //状态栏高度
      // 购物车数量
      cartsNum: 0,
      edit: true,
      tips: "",
      tipList: [],
      checked: false,
      // 正品 商品数组
      skuList: [],
      skuList_temporary: [],
      // 是否可以 提交 预览购物车
      settleable: false,
      // 购物车各种金额
      priceDetailDTO: {},
      // 活动 商品数组
      specifyPromotions: [],
      // 过期
      invalidSkuList: [],
      // 规则弹窗
      ruleStatus: false,
      promotionsTitle: '',
      promotions: [],
      deleteConfirm: false,
      deleteConfirmContent: '',
      a: [],
      countDownStatus: false,
      count: '00:00:00',
      endTime: '',
      timeId: '',
      qualificationsStatus: false,
      dialog: false,
      title: '温馨提示',
      content: '您好！请确定您购买的商品的数量和效期！',
      other_goods: [],
      other_goods_length: false,
      giftList: [],
      confirmMessage: '',
      confirmMessageChecked: false,
      dialogChecked: false,
      displayableCouponList: [],
      displayableCouponStatus: false,
      bottomHeight: '',
      goodsItemId: '',
      reduced: false,
    }
  },
  onPullDownRefresh () {
    if (this.other_goods.length) {
      uni.stopPullDownRefresh()
    } else {
      this.getList()
    }
  },
  onHide () {
    for (const i of this.$refs['child']) {
      clearInterval(i.timeId)
    }
    this.skuList_temporary = []
  },
  methods: {
    clickHasReduced () {
      this.reduced = true
    },
    changeNumHandle (val) {
      this.addCartsNum = val.num
      this.pack = val.item.goodsSku.pack
      this.goodsItemId = val.item.goodsSku.id
      this.addCartsStatus = true
    },
    clickBar () {
      toUpdateCarNum(this.goodsItemId, { num: this.addCartsNum }).then(res => {
        if (res.code === 200) {
          this.getList()
        }
      }).finally(() => {
        this.addCartsStatus = false
      })
    },
    // 监听 数量input 变化
    changeNum () {
      this.addCartsNum % this.pack < this.pack ? this.addCartsNum = parseInt(this.addCartsNum / this
        .pack) * this.pack : ''
      this.addCartsNum > 0 ? '' : this.addCartsNum = this.pack
    },
    addNum () {
      this.addCartsNum += this.pack
    },
    reduceNum () {
      this.addCartsNum > this.pack ? this.addCartsNum -= this.pack : ''
    },
    calculate (e) {
      let a = (e + '').split('.')[1]
      return a.slice(0, 1) + '.' + a.slice(1)
    },
    displayableCoupon () {
      this.displayableCouponStatus = true
    },
    qualificationsOverdue () {
      uni.navigateTo({
        url: '/subpackage/personalCenter/qualifications?active=2'
      })
    },
    goodsNameAggregate (val) {
      let a = ''
      val.forEach(el => {
        a += el.goodsName + ' ' + el.simpleSpecs + '、'
      })
      return a.slice(0, a.length - 1)
    },
    giftPrice (val) {
      let a = 0
      val.forEach(el => {
        a += el.num * el.originalPrice
      })
      return a.toFixed(2)
    },
    closeCombinationGoods () {
      this.other_goods = []
      this.other_goods_length = false
    },
    clickOtherGoods (val) {
      this.other_goods_length = true
      getCombinationProducts(val.goodsSku.skuId).then(res => {
        if (res.code === 200) {
          this.other_goods = res.data
        }
      })
    },
    delItem (e) {
      this.deleteConfirm = true
      this.deleteConfirmContent = '确认移除商品吗'
      // this.a = e
      this.a = [e.goodsSku.id]
    },
    // 预览确认框
    dialogCancel () {
      this.dialog = false
    },
    dialogConfirm () {
      if (this.dialogChecked && this.confirmMessageChecked) {
        this.dialogChecked = false
        this.confirmMessageChecked = false
        uni.navigateTo({ url: '/pages_cart/preview' })
        return
      }
      if (this.dialog) {
        this.dialog = false
        uni.navigateTo({ url: '/pages_cart/preview' })
      }
    },
    getList () {
      getGiftReceiveList().then(res => {
        if (res.code === 200) {
          this.giftList = res.data
        }
      })
      displayableCoupon().then(res => {
        if (res.code === 200) {
          this.displayableCouponList = res.data
        }
      })
      // 获取购物车详情
      getCarInfo().then(res => {
        if (res.code === 200) {
          this.tipList = []
          this.tips = res.data.tips || ""
          this.skuList_temporary = res.data.groups
          this.settleable = res.data.settleable
          this.priceDetailDTO = res.data.priceDetailDTO
          this.invalidSkuList = res.data.invalidSkuList
          this.countDownStatus = false
          this.confirmMessage = res.data.confirmMessage
          this.cartsNum = res.data.kinds

          if (this.cartsNum === res.data.checkedKinds) {
            this.checked = true
          } else {
            this.checked = false
          }

          this.skuList_temporary.forEach(i => {
            i.tips ? this.tipList.push(i.tips) : ''
          })

          uni.stopPullDownRefresh()
        }
      })
    },
    // 更多规则
    more (val) {
      this.promotionsTitle = val.type
      this.promotions = val.rules
      this.ruleStatus = true
    },
    // 移除失效
    removeGoods () {
      this.a = []
      this.invalidSkuList.forEach(item => {
        this.a.push(item.goodsSku.id)
      })
      if (this.a.length) {
        this.deleteConfirm = true
        this.deleteConfirmContent = '确认移除失效药品吗'
      } else {
        uni.showToast({ icon: 'none', title: '购物车中没有失效商品', mask: true })
      }
    },
    // 删除商品
    deleteGoods (item) {
      this.a = []
      if (item) {
        this.a.push(item)
      } else {
        this.skuList_temporary.forEach(jj => {
          jj.skuList.forEach(i => {
            if (i.checked) {
              this.a.push(i.goodsSku.id)
            }
          })
          jj.specifyPromotions.forEach(j => {
            j.skuList.forEach(k => {
              if (k.checked) {
                this.a.push(k.goodsSku.id)
              }
            })
          })
        })
      }

      if (this.a.length) {
        this.deleteConfirm = true
        this.deleteConfirmContent = '确认移除这' + this.a.length + '种商品吗'
      } else {
        uni.showToast({ icon: 'none', title: '请选中商品', mask: true })
      }
    },
    // 删除确认框
    determine () {
      if (this.a.copy) {
        toUpdateCarNum(this.a.goodsSku.id, { num: this.a.promotionNum }).then(res => {
          if (res.code === 200) {
            this.getList()
            this.deleteConfirm = false
            this.edit = true
          } else {
            cartStock(this.a.goodsSku.id).then(res => {
              if (res.code === 200) {
                item.num = res.data
              }
            })
          }
        })
        return
      }
      deleteCarGoods({ skuIds: this.a + '' }).then(res => {
        if (res.code === 200) {
          this.deleteConfirm = false
          this.edit = true
          this.getList()
        }
      })
    },
    // 商品的选中框
    changeSelectStatus (val) {
      selectedStatus(val.ids, val.checked).then(res => {
        if (res.code === 200) {
          this.getList()
        }
      })
    },
    // 全部选中
    changeSelete () {
      this.checked = !this.checked
      selectedAllStatus({ checked: this.checked }).then(res => {
        for (const i of this.$refs['child']) {
          i.checked = this.checked
        }
        this.getList()
      })
    },
    reduce (item) {
      if (item.num === item.goodsSku.pack) return
      item.num > item.goodsSku.pack ? (item.num -= item.goodsSku.pack) : (item.num = item.goodsSku.pack)
      toUpdateCarNum(item.goodsSku.id, { num: item.num }).then(r => {
        if (r.code === 200) {
          this.getList()
        }
      })
    },
    add (item) {
      item.num += item.goodsSku.pack
      toUpdateCarNum(item.goodsSku.id, { num: item.num }).then(r => {
        if (r.code === 200) {
          this.getList()
        }
      })
    },
    // 预览
    preview () {
      this.confirmMessageChecked = false
      if (this.settleable) {
        if (this.confirmMessage) {
          this.dialogChecked = true
        } else {
          this.dialog = true
        }
      }
    },
  },
  onLoad () {
    if (!this.hasToken()) {
      uni.navigateTo({ url: '/pages_user/reg/index' })
    }
  },
  onShow () {
    var self = this
    uni.getSystemInfo({
      success: function (res) {
        self.stateBarHeight = res.statusBarHeight
        // #ifdef MP-WEIXIN
        let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
        let paddingSize = menuButtonInfo.top - self.stateBarHeight
        self.tabBarHeight = menuButtonInfo.bottom - self.stateBarHeight + paddingSize
        self.topBarHeight = menuButtonInfo.bottom + paddingSize
        // #endif
        // #ifndef MP
        self.topBarHeight = self.tabBarHeight + self.stateBarHeight
        // #endif
        // #ifdef MP-TOUTIAO
        self.stateBarHeight = 0
        self.topBarHeight = self.tabBarHeight
        // #endif
      }
    })
    this.verifyTokenStatus = getApp().verifyTokenStatus()
    this.getList()

    // let info = uni.createSelectorQuery().select(".carts_container");
    // info.boundingClientRect(function (data) { //data - 各种参数
    //   console.log(data) // 获取元素的相关信息
    // }).exec()

  }

}
</script>

<style lang="scss" scoped>
.prevent {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
}

.carts_container {
  min-height: 100vh;
  background: #f9f9f9;

  .home_top_bg {
    .top_bgimg {
      width: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 200;
      color: black;
      background: #fff;
    }

    .top_cont {
      display: flex;
      align-items: center;
      padding: 0 20rpx;
      background: #fff;
      /* #ifndef MP-WEIXIN */
      justify-content: space-between;

      /* #endif */
      .title {
        display: block;
        font-size: 30rpx;
        font-weight: bold;

        .title_num {
          font-weight: normal;
          font-size: 28rpx;
          color: red;
        }
      }

      .edit {
        /* #ifdef MP */
        font-size: 28rpx;
        margin-left: 40%;
        /* #endif */
      }
    }
  }

  .tips {
    width: 100%;
    position: fixed;
    left: 0;
    z-index: 100;
    .tips_tips {
      .tips_item {
        width: 100%;
        height: 70rpx;
        line-height: 70rpx;
        font-size: 26rpx;
        color: #333;
        background: #fff5ea;
        padding-left: 24rpx;
        letter-spacing: 1rpx;
        display: flex;
        align-items: center;
        image {
          width: 26rpx;
          height: 26rpx;
          margin-right: 10rpx;
        }
      }
    }
  }

  .content-box {
    flex: 1;
    height: 44px;
    line-height: 44px;
    padding: 0 15px;
    position: relative;
    background-color: #fff;
    border-bottom-color: #f5f5f5;
    border-bottom-width: 1px;
    border-bottom-style: solid;

    .content-text {
      font-size: 30rpx;
    }
  }

  .activityGoods {
    .item {
      .types {
        display: block;
        font-size: 28rpx;
        font-weight: bold;
        background: #fff;
        border-radius: 11rpx;
        line-height: 80rpx;
        padding-left: 20rpx;
        border-bottom: 2rpx solid #f9f9f9;
      }

      .typesetting {
        margin-top: 4rpx;
        background: #fff;
        padding-bottom: 0;
        border-radius: 24rpx;
        overflow: hidden;
      }

      .originalPrice {
        .l {
          color: #ef231b;
        }
      }
    }
  }

  .ephedrine {
    height: 30rpx;
    font-size: 20rpx;
  }

  .invalidGoods {
    width: 710rpx;
    background: #ffffff;
    border-radius: 24rpx;
    margin: 0 20rpx;
    overflow: hidden;
    padding-bottom: 26rpx;
    .type {
      display: flex;
      justify-content: space-between;
      line-height: 94rpx;
      font-size: 30rpx;
      color: #333333;
      padding: 0 21rpx 0 16rpx;
      border-bottom: 1rpx solid #d9d9d9;
      .clearGoods {
        font-size: 24rpx;
        color: #999999;
      }
    }
    .item {
      display: flex;
      opacity: 0.3;
      .image {
        width: 180rpx;
        height: 180rpx;
        margin: 40rpx 16rpx 44rpx 68rpx;
      }
      .goods_info {
        .goodsName,
        .simpleSpecs,
        .expirationDate,
        .manufacturer,
        .price {
          color: #666666;
          font-size: 24rpx;
          line-height: 44rpx;
        }
        .goodsName {
          color: #333333;
          font-size: 30rpx;
          margin-top: 40rpx;
          font-weight: bold;
        }
        .expirationDate,
        .manufacturer {
          display: flex;
          flex-flow: row nowrap;
          align-items: center;
          ._icon {
            width: 24rpx;
            height: 24rpx;
            margin-right: 8rpx;
          }
        }
        .price {
          font-size: 24rpx;
        }
      }
    }
  }

  .welfare {
    background: #ffffff;
    border-radius: 11rpx;
    margin: 0 25rpx 20.83rpx;

    .title {
      font-size: 28rpx;
      font-weight: 500;
      color: #000000;
      line-height: 79.86rpx;
      border-bottom: 1px solid #f9f9f9;
      padding-left: 20.83rpx;
    }

    .list {
      display: flex;
      align-items: center;
      padding: 49.31rpx 0;

      image {
        width: 181rpx;
        height: 181rpx;
        background: #ffffff;
        margin-left: 63.19rpx;
        margin-right: 58.33rpx;
      }

      .info {
        width: 50%;
        display: flex;
        flex-flow: column nowrap;

        text:nth-child(1) {
          font-size: 28rpx;
          font-weight: 500;
          color: #000000;
          margin-bottom: 17.36rpx;
        }

        text:nth-child(2) {
          font-size: 25rpx;
          font-weight: 400;
          color: #8d8d8d;
          margin-bottom: 17.36rpx;
        }

        text:nth-child(3) {
          font-size: 25rpx;
          font-weight: 400;
          color: #ec1818;
          margin-bottom: 17.36rpx;
        }

        text:nth-child(4) {
          font-size: 25rpx;
          font-weight: 400;
          color: #ec1818;
        }
      }
    }
  }

  .notGoods {
    width: 100%;
    color: rgba(0, 0, 0, 0.2);
    font-weight: bold;
    font-size: 30rpx;
    text-align: center;
    padding-top: 95%;
  }

  .coupon {
    height: 108rpx;
    background: #ffffff;
    border-radius: 11rpx;
    margin: 0 25rpx 20.83rpx;
    font-size: 29rpx;
    padding: 0 28.47rpx 0 22.22rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    image {
      width: 9.72rpx;
      height: 15.28rpx;
    }
  }

  .cartsBottom {
    position: fixed;
    left: 0;
    bottom: 0;
    /* #ifdef H5 */
    bottom: 11vh;
    /* #endif */
    z-index: 100;
    width: 100%;
    .countDown {
      height: 83rpx;
      background: #e0e7f5;
      display: flex;
      align-items: center;
      padding-left: 36rpx;
      text {
        color: #333333;
        font-size: 26rpx;
        letter-spacing: 1rpx;
      }
      image {
        width: 26rpx;
        height: 26rpx;
        margin-right: 10rpx;
      }
    }
    .Typesetting {
      height: 116rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 28rpx;
      color: #666666;
      background: #fff;
      label {
        margin-left: 36rpx;
      }
      .flowPrice {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 24rpx;
        .prices {
          text-align: end;
          .total {
            color: #ed1b19;
            font-size: 36rpx;
            font-weight: bold;
          }
          .couponPrice {
            display: flex;
            margin-top: 4rpx;
            position: relative;
            text {
              display: inline-block;
              width: 125rpx;
              height: 36rpx;
              line-height: 36rpx;
              text-align: center;
              color: #ef231b;
              background: rgba($color: #ef231b, $alpha: 0.1);
              border-radius: 17rpx;
              font-size: 22rpx;
              margin-left: 16rpx;
              padding-right: 16rpx;
            }
            image {
              width: 14rpx;
              height: 8rpx;
              position: absolute;
              right: 12rpx;
              bottom: 14rpx;
            }
          }
        }
        .buttons {
          width: 186rpx;
          height: 76rpx;
          background: #ef231b;
          border-radius: 38rpx;
          font-size: 30rpx;
          color: #fff;
          text-align: center;
          margin-left: 36rpx;
          margin-right: 31.94rpx;
        }
        .noActive {
          color: #fff;
          background: #bdbdbd;
        }
      }
      .removeGoods {
        font-size: 25rpx;
        color: #2871fc;
        margin-right: 29.17rpx;
      }
      .deleteGoods {
        display: inline-block;
        line-height: 56rpx;
        font-size: 29rpx;
        color: #565656;
        border: 1px solid #565656;
        border-radius: 28rpx;
        padding: 0 15.28rpx;
        margin-right: 53.47rpx;
      }
    }
  }

  .ruleStyle {
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.2);
    position: fixed;
    top: 0;
    z-index: 1000;
    .rule {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 40%;
      background: #fff;
      z-index: 1000;
      border-top-left-radius: 10rpx;
      border-top-right-radius: 10rpx;

      .title {
        position: relative;

        text {
          display: inline-block;
          font-size: 32rpx;
          font-weight: bold;
          width: 100%;
          text-align: center;
          margin-top: 35rpx;
        }

        img {
          width: 20rpx;
          height: 20rpx;
          position: absolute;
          right: 50rpx;
          top: 50rpx;
        }
      }

      .rule_item {
        margin-top: 50rpx;
        display: flex;

        .type {
          white-space: nowrap;
          // width: 20%;
          font-weight: normal;
          font-size: 22rpx;
          color: #ed1b19;
          margin: 0 50rpx;

          text {
            flex: 1;
            border: 1px solid #ed1b19;
            border-radius: 10rpx;
            padding: 0 6rpx;
          }
        }

        .item {
          font-size: 24rpx;
          width: 100%;
          margin-bottom: 20rpx;
        }
      }
    }

    .data {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 463rpx;
      background: #f9f9f9;
      border-radius: 22rpx 22rpx 0rpx 0rpx;

      .body {
        height: 328rpx;
        background: #ffffff;
        border-radius: 16rpx;
        margin: 25.69rpx 25rpx 0 25rpx;

        .title::before {
          content: "优惠券";
          display: block;
          width: 129.17rpx;
          height: 41.67rpx;
          line-height: 40rpx;
          text-align: center;
          border-radius: 16rpx 0 26rpx 0;
          margin-bottom: 21.53rpx;
          background: linear-gradient(to bottom right, #fc4a27, #ff0c6f);
          font-size: 25rpx;
          font-style: italic;
          color: #ffffff;
          padding: 0;
        }

        .title::after {
          content: "大额优惠券，本单惊喜减减减~";
          display: block;
          line-height: 1;
          padding-left: 21.53rpx;
          font-size: 29rpx;
          font-weight: 400;
          color: #565656;
        }

        .displayableCouponList {
          white-space: nowrap;

          .item {
            display: inline-block;
            width: 206rpx;
            height: 175rpx;
            background: #f4f8ff;
            margin-left: 20.83rpx;
            margin-top: 20.83rpx;
            position: relative;

            .left {
              display: flex;
              flex-flow: column wrap;
              align-items: center;
              line-height: 1;
              color: #2871fc;

              .price {
                font-size: 25rpx;
                margin-top: 27.78rpx;
                margin-bottom: 13.19rpx;

                text {
                  font-size: 50rpx;
                }
              }

              .price_rule {
                font-size: 21rpx;
              }
            }

            .right {
              font-weight: 400;

              text {
                color: #ffffff;
                font-size: 21rpx;
                position: absolute;
                left: 50%;
                bottom: 12rpx;
                z-index: 2;
                transform: translateX(-50%);
                white-space: nowrap;
              }

              image {
                width: 206rpx;
                height: 65rpx;
                position: absolute;
                left: 0;
                bottom: 0;
              }
            }
          }

          .item:last-child {
            margin-right: 20.83rpx;
          }
        }
      }
    }
  }

  .deleteConfirm {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    z-index: 1000;

    .box {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 60%;
      height: 220rpx;
      transform: translate(-50%, -50%);
      background: #fff;
      z-index: 101;
      display: flex;
      flex-flow: column nowrap;
      justify-content: space-around;
      align-items: center;
      padding: 20rpx;

      img {
        width: 88rpx;
        height: 88rpx;
      }

      .button {
        display: flex;

        button {
          font-size: 22rpx;
          width: 166rpx;
          height: 56rpx;
          line-height: 56rpx;
          border-radius: 56rpx;
          background: #2871fc;
          color: #fff;
          margin: 0 20rpx;
        }
      }
    }
  }

  .qualificationsStatus {
    width: 100%;
    height: 69rpx;
    line-height: 68rpx;
    text-align: center;
    color: #ef231b;
    background: #ffe9e8;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 10000;

    text {
      font-size: 21rpx;
    }
  }

  .combinationGoods {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    z-index: 1000;

    .box {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 60%;
      background: #f9f9f9;
      z-index: 1000;
      border-radius: 22rpx 22rpx 0rpx 0rpx;
      overflow: hidden;
      overflow-y: auto;

      .title {
        position: sticky;
        top: 0;
        left: 0;
        width: 100%;
        height: 97rpx;
        background: #fff;
        line-height: 97rpx;

        text {
          display: inline-block;
          font-size: 33.33rpx;
          font-weight: bold;
          width: 100%;
          text-align: center;
          // margin-top: 35rpx;
        }

        img {
          width: 20rpx;
          height: 20rpx;
          position: absolute;
          right: 50rpx;
          top: 38rpx;
        }
      }

      .combinationGoods_item {
        // padding: 13.89rpx;
        // margin-bottom: 13.89rpx;
        margin: 13.89rpx;
        background: #ffffff;
        min-height: 331rpx;
        height: 360rpx;
        border-radius: 11rpx;
        display: flex;

        image {
          width: 194rpx;
          height: 194rpx;
          margin: 61.11rpx 59.03rpx 75.69rpx 37.5rpx;
        }

        .combinationGoods_right {
          width: 50%;
          padding-top: 54.86rpx;
        }

        .goodsName {
          font-size: 29rpx;
          font-weight: 400;
          margin-bottom: 19.44rpx;
        }

        .simpleSpecs,
        .expirationDate,
        .manufacturer {
          font-size: 21rpx;
          font-weight: 400;
          color: #8d8d8d;

          ._icon {
            width: 19rpx;
            height: 19rpx;
            margin: 0;
            margin-right: 7.64rpx;
          }
        }

        .expirationDate,
        .manufacturer {
          margin-top: 14.58rpx;
        }

        .originalPrice {
          color: #ef231b;
          margin-top: 24.72rpx;

          text:nth-child(1) {
            font-size: 25rpx;
          }

          text:nth-child(2) {
            font-size: 33rpx;
          }

          text:nth-child(3) {
            font-size: 25rpx;
            color: #8d8d8d;
            margin-left: 6rpx;
          }

          view {
            float: right;
            font-size: 25rpx;
            color: #8d8d8d;
            margin-top: 4rpx;
          }
        }
      }
    }
  }
}

.dialog_expirationDate {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9998;
  background: rgba($color: #000000, $alpha: 0.2);

  .dialog_bg {
    width: 490rpx;
    height: 500rpx;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
  }

  .dialog_box {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    width: 490rpx;
    height: 500rpx;
    .title {
      font-size: 32rpx;
      color: #333333;
      font-weight: bold;
      margin-top: 148rpx;
      margin-bottom: 48rpx;
      text-align: center;
    }
    .dialog_item {
      display: flex;
      align-items: center;
      margin-left: 58rpx;
      margin-bottom: 26rpx;
      image {
        width: 26rpx;
        height: 26rpx;
        margin-right: 20rpx;
      }
      text {
        font-size: 24rpx;
        color: #333333;
      }
    }
    .content {
      font-size: 24rpx;
      color: #333333;
      margin-left: 49rpx;
      margin-bottom: 31rpx;
    }

    .btn {
      padding: 0 46.84rpx;
      display: flex;
      justify-content: center;

      text {
        display: inline-block;
        width: 150rpx;
        height: 54rpx;
        line-height: 54rpx;
        border-radius: 12rpx;
        text-align: center;
        font-size: 26rpx;
        border: 1px solid transparent;
        margin: 0 16rpx;
      }

      .cancelText {
        color: #2871fc;
        border: 1px solid #2871fc;
      }

      .confirmText {
        color: #fff;
        background: #2871fc;
      }

      .confirmText2 {
        color: #fff;
        background: #b1b1b1;
      }
    }
  }
}

.addCartsNum {
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.2);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 111;

  .content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 50rpx 60rpx;
    border-radius: 16rpx;

    .number {
      display: flex;

      text {
        display: inline-block;
        width: 50rpx;
        background: #fff;
        border: 1px solid #2871fc;
        border-radius: 10rpx;
        text-align: center;
      }

      input {
        display: inline-block;
        width: 200rpx;
        height: 50rpx;
        text-align: center;
        border: 1px solid #2871fc;
        border-radius: 10rpx;
        margin: 0 20rpx;
      }
    }

    .shopcar {
      text {
        display: inline-block;
        background: #2871fc;
        color: #fff;
        border-radius: 100rpx;
        text-align: center;
        margin-top: 44rpx;
        margin-left: 15%;
        width: 70%;
        font-size: 28rpx;
        padding: 6rpx 0;
      }
    }
  }
}

.reduced {
  height: calc(100% - 116rpx);
  width: 100%;
  background: rgba(0, 0, 0, 0.2);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 111;
  .reduced_box {
    width: 100%;
    height: 700rpx;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 112;
    background: #fff;
    border-radius: 16rpx 16rpx 0 0;
    border-bottom: 4rpx solid #f4f4f4;
    .title {
      position: relative;
      width: 100%;
      text-align: center;
      font-size: 32rpx;
      padding-top: 34rpx;
      image {
        position: absolute;
        top: 45rpx;
        right: 34rpx;
        width: 24rpx;
        height: 24rpx;
      }
    }
    .reduced_body {
      padding: 0 34rpx;
      margin-top: 56rpx;
      .item {
        display: flex;
        justify-content: space-between;
        font-size: 30rpx;
        margin-top: 38rpx;
        text:nth-child(2) {
          color: #ef231b;
          font-weight: 600;
        }
      }
      .item:first-child {
        text:nth-child(2) {
          color: #000;
          font-weight: 600;
        }
      }
      .total {
        font-size: 40rpx;
        margin-top: 120rpx;
      }
      .supplement {
        font-size: 24rpx;
        color: #999;
        margin-top: 6rpx;
      }
    }
  }
}
</style>